<template>
  <div
    class="cu-conrainer"
    style="
       {
        width: width + 'px';
      }
    "
    :contenteditable="true"
    @keydown="keydown($event)"
  >
    <template v-for="(item, index) in datas">
      <p
        class="input"
        :key="index"
        :class="{ bSel: item.bSel == '1' }"
        @click="inputClick(item)"
      >
        {{ item.showName }}
      </p>
    </template>
    <button text="add" @click="addOne()" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      datas: [
        {
          showName: 'xxxxxx',
          bSel: '0',
          selfData: {}
        }
      ],
      fzOne: {}
    }
  },
  props: {
    width: 200
  },
  methods: {
    inputClick(item) {
      let flag = item.bSel
      this.datas.forEach((element) => {
        element.bSel = '0'
      })
      item.bSel = 1 - (flag - 0) + ''
    },
    addOne() {
      let one = {
        showName: 'xxxxxx;',
        bSel: '0',
        selfData: {}
      }
      this.datas.push(one)
    },
    keydown(e) {
      console.log(e.keyCode)
      e.preventDefault()
      if (e.keyCode == 8) {
        let oneIndex = this.datas.findIndex((item) => {
          return item.bSel == true
        })
        if (oneIndex != -1) {
          this.datas.splice(oneIndex, 1)
        } else {
          this.datas[this.datas.length - 1].bSel = '1'
        }
      } else if (e.keyCode == 46) {
        let oneIndex = this.datas.findIndex((item) => {
          return item.bSel == true
        })
        if (oneIndex != -1) {
          this.datas.splice(oneIndex, 1)
        }
      } else if (e.ctrlKey && e.keyCode === 67) {
        let oneIndex = this.datas.findIndex((item) => {
          return item.bSel == true
        })
        if (oneIndex != -1) {
          let fzOne = this.datas[oneIndex]
          window.clipboardData.setData('fzOne', JSON.stringify(fzOne))
        }
      } else if (e.ctrlKey && e.keyCode === 86) {
        alert(window.clipboardData.getData('fzOne'))
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.cu-conrainer {
  display: flex;
  box-sizing: border-box;
  padding: 2px 2px;
  flex-wrap: wrap;
  .input {
    padding: 2px 5px;
    background: none;
    border: none;
    outline: none;
  }
  .bSel {
    color: #fff;
    background: blue;
  }
}
</style>
